<template>
    <view class="globe_back">
        <view style="height: 70rpx"></view>
        <view class="box">
            <view class="logistics" v-for="item in logisticsList">
                <view>
                    <view class="line"></view>
                    <view class="round"></view>
                </view>
                <view class="node">
                    <view class="flex">
                        <view class="title">{{ item.type }}</view>
                        <view class="time">{{ item.time }}</view>
                    </view>
                    <view class="text">{{ item.text }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            logisticsList: [
                {
                    type: '已签收',
                    time: '2022-02-10 20:30',
                    text: '[收货地址]贵州省贵阳市花果园金融街一号1824 王先生 156****4541'
                },
                {
                    type: '待取件',
                    time: '2022-02-10 20:30',
                    text: '您的快递已到达金融街一号菜鸟驿站处，请凭取件码3-3-15取件'
                },
                {
                    type: '运输中',
                    time: '2022-02-10 20:30',
                    text: '快件到达[贵阳转运中心]'
                },
                {
                    type: '已发货',
                    time: '2022-02-10 20:30',
                    text: '商家已发货，包裹正在等待揽件'
                },
                {
                    type: '已下单',
                    time: '2022-02-10 20:30',
                    text: '已下单，订单创建成功'
                }
            ]
        };
    },
    methods: {}
};
</script>

<style scoped lang="scss">
.box {
    padding: 32rpx;
    .round {
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        background: #666b75;
    }
    .line {
        width: 4rpx;
        height: 150rpx;
        background: #ccced1;
        margin-left: 4rpx;
    }
    .logistics:nth-child(1) .line {
        display: none;
    }
    .logistics:nth-child(1) .round {
        background: #3377ff;
    }
    .logistics:nth-child(2) .line {
        background: #3377ff;
    }
    .logistics:nth-child(1) .title,
    .time {
        color: #00091a !important;
    }
    .logistics:nth-child(1) .time {
        color: #00091a !important;
    }
    .logistics:nth-child(1) .text {
        color: #00091a !important;
    }
    .logistics {
        position: relative;
    }
    .node {
        position: absolute;
        left: 50rpx;
        bottom: -70rpx;
    }
    .title {
        font-size: 32rpx;
        color: #666b75;
    }
    .time {
        font-size: 24rpx;
        color: #ccced1;
        margin-left: 8rpx;
        margin-top: 8rpx;
    }
    .text {
        color: #999ca3;
        font-size: 28rpx;
        margin-top: 16rpx;
    }
}
</style>
